<template>
	<div class="art_list">
		<ContentTable v-bind="tableConfig" v-model:page="page" :total="total" :data="tableData" :page-change="queryArticle">
			<template #digest="{ row }">
				<span class="digest">{{ row.digest }}</span>
			</template>
			<template #status="{ row }">
				<DictTag :options="art_status" :value="row.status" />
			</template>
			<template #handler="{ row }">
				<el-button type="primary" size="small" @click="handleEditInfo(row)">编辑信息</el-button>
				<el-button type="primary" size="small" @click="handleEditContent(row)">编辑内容</el-button>
				<el-button type="danger" size="small">删除</el-button>
			</template>
		</ContentTable>

		<el-dialog v-model="open" title="保存文章" width="600" top="10vh" draggable>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="90px">
				<el-form-item label="文章标题" prop="title">
					<el-input v-model="formData.title" placeholder="请输入文章标题" />
				</el-form-item>
				<el-form-item label="文章摘要" prop="digest">
					<el-input
						v-model="formData.digest"
						type="textarea"
						rows="6"
						maxlength="300"
						show-word-limit
						placeholder="请输入文章摘要"
					/>
				</el-form-item>
				<el-form-item label="封面" prop="cover">
					<el-upload
						accept="image/jpeg, image/png"
						class="avatar-uploader"
						name="picture"
						:action="address + '/upload/picture'"
						:headers="{ Authorization: token }"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img v-if="formData.cover" :src="formData.cover" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="formData.status">
						<el-radio label="1">发布</el-radio>
						<el-radio label="0">仅保存</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="open = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 认</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { selectArticle } from '@/service/article/content'
import ContentTable from '@/components/ContentTable/ContentTable.vue'
import DictTag from '@/components/DictTag'
import { tableConfig } from './config'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { useLoginStore } from '@/store/login/login'
import { ResultEnum } from '@/global/constant'
import { insertArticle, updateArticle } from '@/service/article/content'
import { handleTagList } from '@/utils/mapRouters'

const { proxy } = getCurrentInstance() as any
const { art_status } = proxy.$useDict('art_status')

const payload = ref({})
const tableData = ref([])
const total = ref(0)
const page = ref({
	pageNum: 1,
	pageSize: 10
})
async function queryArticle() {
	const result = await selectArticle({ ...payload.value, ...page.value })
	tableData.value = result.list
	total.value = result.total
}
queryArticle()

const open = ref(false)
const formData = ref<any>({ cover: '', status: '1' })
const rules = {
	title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
	digest: [{ required: true, message: '请输入文章摘要', trigger: 'blur' }]
}
const address = import.meta.env.VITE_PROXY_URL
const loginStore = useLoginStore()
const token = loginStore.token
const copyRowKeys = ['id', 'title', 'cover', 'status', 'digest']

const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
	if (response.code == ResultEnum.SUCCESS) {
		formData.value.cover = response.data[0].url
	}
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
		ElMessage.error('格式错误!')
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('图片不能大于 2MB!')
		return false
	}
	return true
}

function handleEditInfo(row: any) {
	for (const key of copyRowKeys) {
		formData.value[key] = row[key]
	}
	open.value = true
}
const router = useRouter()
function handleEditContent(row: any) {
	router.push({
		name: 'content',
		params: {
			infoId: row.id
		}
	})
	handleTagList()
}

const formRef = ref()
function submit() {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			if (formData.value.id) {
				await updateArticle(formData.value)
				open.value = false
				ElMessage.success('编辑成功')
				formData.value = { cover: '', status: '1' }
				queryArticle()
			} else {
				await insertArticle(formData.value)
				open.value = false
				ElMessage.success('文章已创建')
				formData.value = { cover: '', status: '1' }
				queryArticle()
			}
		}
	})
}
</script>

<style lang="less" scoped>
.digest {
	text-align: left;
	font-size: 15px;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; //溢出内容隐藏
	text-overflow: ellipsis; //文本溢出部分用省略号表示
	display: -webkit-box; //特别显示模式
	-webkit-line-clamp: 3; //行数
	line-clamp: 3;
	-webkit-box-orient: vertical; //盒子中内容竖直排列
}
</style>
